<template>
  <page-body>
    <view class="page">
      <view class="flex benben-position-layout flex flex-wrap align-center my_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-center justify-between flex-sub my_fd0_0'>
          <view class='flex flex-wrap align-center my_fd0_0_c0'>
          </view>
          <view class='flex flex-wrap align-stretch justify-center'>
          </view>
          <view class='flex flex-wrap align-center justify-end my_fd0_0_c0'>
            <image class='my_fd0_0_c2_c0' mode="aspectFit" :src='STATIC_URL+"26.png"' @tap.stop="handleJumpDiy"
              data-type="navigateTo" :data-url="`/pages/xtsz/system/system`"></image>
          </view>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>

      <view class="flex flex-wrap align-start benben-flex-layout my_flex_1">
        <view class='flex flex-direction flex-wrap align-stretch flex-sub'>
          <view class='flex flex-wrap align-center' v-if="isLogin===true" @tap.stop="handleJumpDiy"
            data-type="navigateTo" :data-url="`/pages/grzx/personalData/personalData`">
            <image class='my_fd1_0_c0_c0' mode="aspectFit" :src='userInfo.avatar'
              @tap.stop="singleImagePreview(userInfo.avatar)"></image>
            <view class='flex flex-direction flex-wrap align-stretch flex-sub my_fd1_0_c0_c1'>
              <text class='my_fd1_0_c0_c1_c0'>{{userInfo.nickname}}
                <image class='edit' mode="aspectFit" :src='STATIC_URL+"213.png"'></image>
              </text>
              <view class='flex flex-wrap align-center my_fd1_0_c0_c1_c1' @tap.stop="copyText2(userInfo.id)">
                <text class='my_fd1_0_c0_c1_c1_c0'>ID：</text>
                <text class='my_fd1_0_c0_c1_c1_c1'>{{userInfo.id}}</text>
                <image class='my_fd1_0_c0_c1_c1_c2' mode="aspectFit" :src='STATIC_URL+"144.png"'></image>
              </view>
            </view>
            <image class='my_fd1_0_c0_c2' mode="aspectFit" :src='STATIC_URL+"29.png"' @tap.stop="handleJumpDiy"
              data-type="navigateTo" :data-url="`/pages/grzx/personalData/personalData`"></image>
          </view>
          <view class='flex flex-wrap align-center' @tap.stop="toLoginDiy()" v-if="isLogin===false">
            <image class='my_fd1_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"5.png"'></image>
            <view class='flex flex-direction flex-wrap align-stretch flex-sub my_fd1_0_c0_c1'>
              <view class='flex flex-wrap align-center'>
                <text class='my_fd1_0_c1_c1_c0_c0'>请登录</text>
              </view>
            </view>
          </view>

        </view>
      </view>



      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout my_flex_2">
        <view class='flex align-stretch justify-around my_fd2_0'>
          <view class='flex flex-direction align-center' @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/grzx/Followfans/Followfans?type=1`">
            <text class='my_fd2_0_c0_c0'>{{userInfo.follow_num}}</text>
            <text class='my_fd2_0_c0_c1'>关注</text>
          </view>
          <view class='flex flex-direction align-center' @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/grzx/Followfans/Followfans?type=2`">
            <text class='my_fd2_0_c0_c0'>{{userInfo.fans_num}}</text>
            <text class='my_fd2_0_c0_c1'>粉丝</text>
          </view>
          <view class='flex flex-direction align-center' @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/grzx/visitor/visitor`">
            <text class='my_fd2_0_c0_c0'>{{userInfo.visit_num}}</text>
            <text class='my_fd2_0_c0_c1'>访客</text>
          </view>
        </view>
      </view>


      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout my_flex_3">
        <view class='flex flex-wrap align-center justify-between my_fd3_0'>
          <view class='flex flex-direction align-center' @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/grzx/myTracks/myTracks?type=1`">
            <image class='my_fd3_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"145.png"'></image>
            <text class='my_fd3_0_c0_c1'>我的点赞</text>
          </view>
          <view class='flex flex-direction align-center' @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/grzx/myTracks/myTracks?type=2`">
            <image class='my_fd3_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"146.png"'></image>
            <text class='my_fd3_0_c0_c1'>我的足迹</text>
          </view>
          <view class='flex flex-direction align-center' @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/grzx/myTracks/myTracks?type=3`">
            <image class='my_fd3_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"147.png"'></image>
            <text class='my_fd3_0_c0_c1'>我的收藏</text>
          </view>
          <view class='flex flex-direction align-center' @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/xtsz/aboutUs/aboutUs`">
            <image class='my_fd3_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"148.png"'></image>
            <text class='my_fd3_0_c0_c1'>关于我们</text>
          </view>
        </view>
        <view class='flex flex-wrap align-center justify-between'>
          <view class='flex flex-direction align-center' @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/xtsz/helpFeedback/helpFeedback`">
            <image class='my_fd3_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"149.png"'></image>
            <text class='my_fd3_0_c0_c1'>用户帮助</text>
          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <!---flex布局flex布局开始-->
      <view class="flex benben-flex-layout flex-wrap align-center my_flex_4" @tap.stop="handleJumpDiy"
        data-type="navigateTo" :data-url="`/pages/grzx/invite/invite`">
        <image class='my_fd4_0' mode="aspectFill" :src='STATIC_URL+"150.png"'></image>
      </view>

      <!---flex布局flex布局结束-->


    </view>
  </page-body>
</template>
<script>
  import {
    validate
  } from '@/common/utils/validate.js'
  // 11111111111111111111
  import {
    TUILogin
  } from "@tencentcloud/tui-core";
  import {
    SYSTEM_CONFIG,
    SDKAppID,
    secretKey
  } from "@/common/config.js";
  import {
    TUIChatKit,
    genTestUserSig
  } from "@/TUIKit";
  import {
    vueVersion
  } from "@/TUIKit/adapter-vue";
  // 22222222222222222222222222
  export default {
    components: {},


    data() {
      return {
        "userInfo": {
          "invite_code": "",
          "address": "",
          "address_code": "",
          "hobby": "",
          "tags": "",
          "id": "",
          "userlevel_id": "",
          "mobile": "",
          "real_name": "",
          "avatar": "",
          "account": "",
          "email": "",
          "birthday": "",
          "gender": "",
          "create_time": "",
          "user_money": "",
          "freeze_money": "",
          "total_consumption_money": "",
          "score": "",
          "_mobile": "",
          "coupon": "",
          "collection_count": "",
          "browse_count": "",
          "total_money": "",
          "certified": "",
          "nickname": "",
          "is_pay_password": "",
          "follow_count": "",
          "is_close": ""
        },
        "subscripts": {
          "article": "",
          "message": "",
          "chat": "",
          "all": ""
        }
      };
    },
    computed: {
      isLogin() {
        return this.$store.state.token == '' ? false : true;
      },
      // userInfo: {
      //   get() {
      //     return this.$store.state.userInfo
      //   },
      //   set() {
      //     this.$store.commit('updateUserInfo', value)
      //   },
      // }
    },
    watch: {},
    onLoad(options) {

    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {
      this.queryUserInfoFunc()
      this.obtainMessagesFunc()
      if (this.isLogin) {
        const userID = this.userInfo ? this.userInfo.id.toString() : '';
        let config = {
          userID: userID, //User ID
          SDKAppID: SDKAppID, // Your SDKAppID
          secretKey: secretKey, // Your secretKey
        }
        const userSig = genTestUserSig(config).userSig;
        TUILogin.login({
          SDKAppID: config.SDKAppID,
          userID: config.userID,
          userSig: userSig,
          // 如果您需要发送图片、语音、视频、文件等富媒体消息，请设置为 true
          useUploadPlugin: true,
          useProfanityFilterPlugin: false,
          framework: `vue${vueVersion}` // 当前开发使用框架 vue2 / vue3
        }).then(() => {
          let nums = uni.$TIM.getTotalUnreadMessageCount();
          if (nums) {
            uni.setTabBarBadge({
              index: 2,
              text: nums.toString()
            })
          }

        })
      } else {
        uni.removeTabBarBadge({
          index: 2
        })
      }
    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      copyText2(data) {
        console.log('ppp', data)
        let that = this
        uni.setClipboardData({
          data: data.toString(),
          success: () => {
            that.$message.info('复制成功')
          }
        });
      },
      //获取用户详细信息
      async queryUserInfoFunc() {
        if (this.isLogin === true) {
          //请求方法
          //数据验证

          let datauserInfo = await this.$api.get(global.apiUrls.post5c78c4772da97, {

          });

          if (datauserInfo.data.code != 1) {
            this.$message.info(datauserInfo.data.msg);
            return
          }
          let infouserInfo = datauserInfo.data;
          this.userInfo = infouserInfo.data

        }
      },
      //获取消息数量
      async obtainMessagesFunc() {
        //请求方法
        //数据验证

        let datasubscripts = await this.$api.get(global.apiUrls.post64241ca6cf066, {

        });

        if (datasubscripts.data.code != 1) {
          this.$message.info(datasubscripts.data.msg);
          return
        }
        let infosubscripts = datasubscripts.data;
        this.subscripts = infosubscripts.data

      },
      //是否认证跳转
      isAuthenticationFunc() {
        if (this.userInfo.certified == '-1') {
          this.$urouter.navigateTo(`/pages/grzx/realname/realname`);
        } else {
          this.$urouter.navigateTo(`/pages/grzx/examine/examine`);
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .edit {
    width: 28rpx;
    height: 28rpx;
    margin-left: 6rpx;
  }

  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: url(image-path('36.png')) no-repeat;
    background-size: 100% auto;
  }

  .my_flex_0 {
    background: url(image-path('36.png')) no-repeat;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .my_fd0_0_c2_c0 {
    width: 40rpx;
    height: 40rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .my_fd0_0_c0 {
    width: 200rpx;
  }

  .my_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .my_flex_1 {
    padding: 24rpx 32rpx 30rpx 32rpx;
  }

  .my_fd1_0_c1_c1_c0_c0 {
    font-size: 36rpx;
    font-weight: 700;
    color: #FFFFFF;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .my_fd1_0_c0_c2 {
    width: 14rpx;
    height: 26rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .my_fd1_0_c0_c1_c1_c2 {
    width: 24rpx;
    height: 24rpx;
  }

  .my_fd1_0_c0_c1_c1_c1 {
    font-size: 24rpx;
    margin: 4rpx 16rpx 0rpx 6rpx;
  }

  .my_fd1_0_c0_c1_c1_c0 {
    font-size: 24rpx;
    font-weight: 500;
  }

  .my_fd1_0_c0_c1_c1 {
    margin: 8rpx 0rpx 0rpx 0rpx;
    color: rgba(102, 102, 102, 1);
  }

  .my_fd1_0_c0_c1_c0 {
    font-size: 36rpx;
    font-weight: 700;
    color: var(--benbenFontColor0);
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    margin: 0rpx 0rpx 20rpx 0rpx;
  }

  .my_fd1_0_c0_c1 {
    margin: 0rpx 0rpx 0rpx 20rpx;
  }

  .my_fd1_0_c0_c0 {
    width: 128rpx;
    height: 128rpx;
    border-radius: 66rpx 66rpx 66rpx 66rpx;
  }

  .my_flex_2 {
    padding: 18rpx 24rpx 0rpx 24rpx;
  }

  .my_fd2_0_c0_c1 {
    margin: 24rpx 0rpx 0rpx 0rpx;
    font-size: 24rpx;
  }

  .my_fd2_0_c0_c0 {
    font-size: 40rpx;
    font-weight: 600;
  }

  .my_fd2_0 {
    background: #fff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    background-size: 100% auto !important;
    padding: 32rpx;
  }

  .my_flex_3 {
    background: rgba(255, 255, 255, 1);
    width: 702rpx;
    border-radius: 16rpx;
    margin: 24rpx auto 24rpx auto;
    background-size: 100% auto;
    padding: 32rpx;
  }

  .my_fd3_0_c0_c1 {
    font-size: 24rpx;
    font-weight: 400;
    color: rgba(54, 55, 61, 1);
  }

  .my_fd3_0_c0_c0 {
    width: 64rpx;
    height: 64rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 0rpx 24rpx 0rpx;
  }

  .my_fd3_0 {
    margin: 0rpx 0rpx 32rpx 0rpx;
  }

  .my_flex_4 {
    width: 702rpx;
    height: 126rpx;
    margin: 0rpx auto 0rpx auto;
  }

  .my_fd4_0 {
    width: 100%;
    height: 100%;
  }
</style>
